在 Day 10，我把原本的 Header 從 HTML/CSS 的思維轉換成 Angular Component。

完成之後，我開始發現：

如果 Header 可以做成 Component，那 Footer 是不是也應該這樣做？

我的智慧醫院網站幾乎每個頁面都有相同的 Header 和 Footer。

如果每個頁面都重新寫一次，不但會產生很多重複程式碼，之後修改也會變得很麻煩。

所以今天要繼續延伸 Angular Component 的概念，開始把整個網站的共用結構整理起來。

今天的目標是建立：

Header
   ↓
Main Content
   ↓
Footer

讓網站開始具有比較完整、正式的前端架構。

一、為什麼需要拆分 Component？

在一開始寫網頁時，我可能會直接把所有東西放在同一個頁面：

HTML
├── Header
├── 首頁內容
├── Footer

如果只有一個頁面，這樣看起來沒有什麼問題。

但我的智慧醫院網站並不只有首頁。

目前已經有：

首頁
醫師查詢
醫師詳細資訊
登入
預約掛號
我的預約
...

如果每一頁都自己寫：

Header
頁面內容
Footer

就會變成：

首頁
├── Header
├── Home Content
└── Footer

醫師查詢
├── Header
├── Doctor Query Content
└── Footer

醫師詳細資訊
├── Header
├── Doctor Detail Content
└── Footer

可以看到 Header 和 Footer 被重複很多次。

這就是我今天想解決的問題。

二、Component 拆分的概念

Angular Component 的其中一個重要概念就是：

把網站拆成一個一個可以獨立管理的區塊。

例如我的網站可以先拆成：

網站
│
├── Header
│
├── Main Content
│
└── Footer

其中：

Header

負責：

• Logo
• 導覽列
• 登入
• 網站主要導覽

Main Content

負責：

• 首頁
• 醫師查詢
• 醫師詳細資訊
• 登入
• 預約
• 其他頁面內容

Footer

負責：

• 網站資訊
• 聯絡資訊
• 網站導覽
• 版權資訊

這樣不同區域就有自己的責任。

三、Header 已經可以重複使用

在 Day 10，我已經完成 Header Component。

所以現在不需要在每一個頁面重新寫：

<header>
  ...
</header>

而是可以直接使用：

<app-header></app-header>

讓 Angular 顯示 Header Component。

這樣不管使用者現在是在：

首頁

還是：

醫師查詢

或：

醫師詳細資訊

都可以使用同一個 Header。

四、接著把 Footer 元件化

既然 Header 可以元件化，接下來就是 Footer。

以前可能會直接在每一個 HTML 頁面底下寫：

<footer>
  ...
</footer>

但現在我要把它獨立成：

FooterComponent

讓 Footer 自己管理：

Footer HTML
Footer CSS
Footer 相關內容

之後其他頁面只需要使用：

<app-footer></app-footer>

就可以顯示相同的 Footer。

五、Footer 裡面放什麼？

我的智慧醫院網站 Footer 主要是網站資訊與聯絡方式。

例如：

智慧醫院
────────────────────
首頁
醫院介紹
醫師查詢
預約掛號
我的預約

地址
電話

© Smart Hospital

這些內容在不同頁面基本上都是一樣的。

因此非常適合做成共用 Component。

六、建立網站主要結構

完成 Header 和 Footer 之後，我開始整理整個網站的主要架構。

目前可以先想成：

App
│
├── HeaderComponent
│
├── Main Content
│
└── FooterComponent

而 Main Content 並不是固定只有一個頁面。

它會配合前一天學習的 Angular Routing。

例如：

App
│
├── Header
│
├── Router Outlet
│   │
│   ├── Home
│   ├── Doctor Query
│   ├── Doctor Detail
│   ├── Login
│   └── Appointment
│
└── Footer

這樣就把 Component 和 Routing 兩個概念連在一起了。

七、router-outlet 就是主要內容的位置

Day 9 學到的 router-outlet，現在就可以派上用場。

整體結構可以寫成：

<app-header></app-header>

<router-outlet></router-outlet>

<app-footer></app-footer>

這三個區域分別代表：

<app-header>
      ↓
網站 Header

<router-outlet>
      ↓
目前頁面的內容

<app-footer>
      ↓
網站 Footer

所以當使用者切換不同路由時：

首頁

會變成：

Header
  ↓
Home
  ↓
Footer

切換到：

醫師查詢

則變成：

Header
  ↓
Doctor Query
  ↓
Footer

Header 和 Footer 不需要重新建立。

中間的內容才會隨著 Routing 改變。

八、為什麼不要每個頁面都複製 Header/Footer？

這是今天很重要的一個問題。

如果我直接複製：

Header
Footer

到每個頁面，一開始可能會覺得：

「反正可以正常顯示，好像也沒什麼問題。」

但是當網站越來越大，就會開始出現問題。

例如我想修改 Footer 的電話：

首頁 Footer → 修改
醫師查詢 Footer → 修改
醫師詳細資訊 Footer → 修改
登入 Footer → 修改
預約頁 Footer → 修改

每個地方都要修改。

如果不小心漏掉其中一頁，就可能出現不同頁面的資訊不一致。

九、使用 Component 後會怎麼樣？

如果 Footer 是：

FooterComponent

所有頁面都使用：

<app-footer></app-footer>

那麼之後只需要修改：

FooterComponent

就可以影響所有使用它的頁面。

變成：

FooterComponent
       ↓
 ┌─────┼─────┐
 ↓     ↓     ↓
首頁  查詢頁  詳細頁

這就是 Component 重複使用的好處。

十、開始思考「哪些東西應該拆成 Component」

做到這裡，我開始發現：

Component 並不是越多越好，而是要思考哪些東西值得被獨立管理。

例如目前我的網站：

判斷的方式可以先想：

① 會不會重複使用？

如果很多地方都會出現，就很適合考慮 Component。

② 有沒有自己的功能？

如果這個區塊有自己的互動或邏輯，也適合獨立管理。

③ 是否需要獨立維護？

如果未來可能經常修改，拆成 Component 會比較容易管理。

所以不是看到一個區塊就一定要拆成 Component。

而是要思考它在整個網站中的角色。

十一、從「頁面」開始轉換成「網站結構」

以前我比較容易用頁面來思考：

首頁
醫師查詢
醫師詳細資訊
登入
預約

但開始學 Angular Component 之後，我會開始換一種方式思考：

共用結構
├── Header
├── Main Content
└── Footer

頁面內容
├── Home
├── Doctor Query
├── Doctor Detail
├── Login
└── Appointment

這個轉換對我來說很重要。

因為網站不是很多個完全獨立的 HTML 頁面，而是由很多可以重複使用的元件組合而成。

十二、Component 和 Routing 開始結合

到目前為止，我已經學到兩個重要概念：

Routing

解決：

不同頁面怎麼切換？

/
 ↓
/doctors
 ↓
/doctors/:id

Component

解決：

網站內容怎麼拆分與重複使用？

Header
Footer
Doctor Card
FAQ
...

兩個概念結合起來後：

                    Angular
                       │
          ┌────────────┴────────────┐
          ↓                         ↓
      Component                  Routing
          ↓                         ↓
    網站如何拆分              頁面如何切換
          │                         │
          └────────────┬────────────┘
                       ↓
                  完整網站

這讓我的網站開始有比較清楚的架構。

十三、目前的 Angular 網站架構

目前整理之後，我的網站可以先規劃成：

App
│
├── HeaderComponent
│
├── Main
│   │
│   └── router-outlet
│       │
│       ├── HomeComponent
│       ├── DoctorQueryComponent
│       ├── DoctorDetailComponent
│       ├── LoginComponent
│       └── AppointmentComponent
│
└── FooterComponent

這個架構也開始對應到之前在 Figma 規劃的網站。

Figma 負責：

畫面設計
Component 設計
User Flow
Prototype

Angular 則開始負責：

Component
Routing
頁面結構
互動功能

也就是從設計階段慢慢進入真正的程式開發。

十四、這次遇到的問題與解決方式

1. Header 和 Footer 在不同頁面一直重複

每個頁面都需要 Header 和 Footer，如果直接複製，會產生大量重複內容。

解決方式

將 Header 和 Footer 分別建立成 Angular Component：

HeaderComponent
FooterComponent

再讓不同頁面共用。

2. 不知道 Main Content 應該放在哪裡

如果 Header、Footer 和每個頁面都混在一起，網站架構會變得不清楚。

解決方式

使用：

<router-outlet></router-outlet>

作為主要內容的位置。

讓 Header 和 Footer 固定，而中間內容由 Routing 決定。

3. 開始拆 Component 後，不知道什麼都要不要拆

如果看到每一個區塊都建立 Component，反而可能讓專案變得太複雜。

解決方式

先判斷：

• 是否會重複使用？
• 是否有自己的功能？
• 是否需要獨立維護？

符合實際需求時再拆成 Component。

十五、今天的成果

今天完成了網站主要結構的整理：

Header
   ↓
Main Content
   ↓
Footer

並將：

Header
Footer

都元件化。

再搭配昨天學到的 Routing：

Header
   ↓
router-outlet
   ↓
目前頁面
   ↓
Footer

現在網站已經不再只是「一個頁面一個 HTML」。

而是開始變成：

由不同 Component 組合而成的網站。

十六、今天學到的重點

今天主要學習 Angular 的元件化概念：

今天最大的收穫是開始理解：

Angular 不只是把 HTML 寫進 Component，而是要開始思考整個網站應該怎麼拆。

十七、下一步

目前網站的基本結構已經建立起來：

Header
   ↓
Main Content
   ↓
Footer

而醫師查詢頁也已經可以透過 Routing 進入。

下一步就可以開始處理真正的「資料」。

例如醫師查詢頁不可能永遠只有寫死的：

王醫師
李醫師
陳醫師

未來會需要讓 Angular 根據資料產生醫師卡片。

因此接下來要開始思考：

如何讓 Component 接收資料，然後根據不同資料顯示不同的內容？

這也會開始進入 Angular 裡非常重要的 Data Binding。